<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-05-21 09:54:00
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-07-22 16:16:58
 * @FilePath: \hn-fire-product-mobile\src\pages\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { useUserStore } from '@/stores/user';
import SafetyEdu from './safetyEdu.vue';
import ExamScores from './examScores.vue';
import Certificate from './certificate.vue';
import { useRouter } from 'vue-router';
import {
	whManagerBsTbExamResultGetLastExamResultUsingPost,
	whManagerBsTbArticleGetMyStudyProgressUsingGet,
} from '@/genapi/wh';

defineOptions({ name: 'Third' });

const userStore = useUserStore();

const router = useRouter();
const tabValue = ref('1');
function thirdClick() {
	router.replace({ path: '/home/thirdPage' });
}

const scoreResult = ref();
whManagerBsTbExamResultGetLastExamResultUsingPost({}).then((res) => {
	scoreResult.value = res.data;
});

const studyingResult = ref();
whManagerBsTbArticleGetMyStudyProgressUsingGet({}).then((res) => {
	studyingResult.value = res.data;
});

const isOverdue = computed(() => {
	return new Date(scoreResult.certificateExpireDate).getTime() < new Date().getTime();
});

const isUpToOverdue = computed(() => {
	return (
		new Date().getTime() + 7 * 24 * 60 * 60 * 1000 < new Date(scoreResult.certificateExpireDate).getTime() &&
		new Date(scoreResult.certificateExpireDate).getTime() >= new Date().getTime()
	);
});
</script>

<template>
	<div class="third">
		<div class="archive-box" @click="thirdClick">
			<img src="../assets/storage.png" />
		</div>
		<div class="statisticPanel">
			<div class="unitCount">
				<span>安全教育学习进度</span>
				<div class="unitCountNum">
					<span>{{ studyingResult?.completeRate }}%</span>
				</div>
				<div class="isPass" v-if="Number(studyingResult?.completeRate) < 85">未达标</div>
			</div>
			<div class="unitCount">
				<span>最新考试成绩</span>
				<div class="unitCountNum">
					<span>{{ scoreResult?.examScore }}分</span>
				</div>
				<div class="isPass overdued" v-if="isOverdue">已过期</div>
				<div class="isPass upToOverdue" v-else-if="isUpToOverdue">即将到期</div>
			</div>
		</div>
		<nut-tabs swipeable v-model="tabValue" auto-height>
			<nut-tab-pane title="安全教育" pane-key="1">
				<SafetyEdu />
			</nut-tab-pane>
			<nut-tab-pane title="考试成绩" pane-key="2">
				<ExamScores />
			</nut-tab-pane>
			<nut-tab-pane title="电子证书" pane-key="3">
				<Certificate />
			</nut-tab-pane>
		</nut-tabs>
	</div>
</template>

<style scoped lang="scss">
.nut-tab-pane {
	padding: 0px 17px !important;
}
.third {
	height: 100%;
	width: 100%;
	--nut-tabs-titles-background-color: #fff;
	--nut-tabs-titles-item-color: #4e5969;
	--nut-tabs-titles-item-active-color: #1664ff;
	.archive-box {
		width: 100%;
		height: 80px;
		display: flex;
		justify-content: center;
		margin-top: 10px;
		align-items: center;
		background-color: #fff;
		img {
			width: 92%;
		}
	}
	.statisticPanel {
		background-color: #fff;
		height: 70px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		padding: 0 6px;
		.unitCount {
			width: 45%;
			height: 80%;
			background-position: 90% 100%;
			background-size: 40%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 10px 10px;
			font-size: 11px;
			color: #6d6f74;
			.unitCountNum {
				font-size: 16px;
				color: #000;
			}
			&:nth-child(1) {
				background-color: #e6f4fe;
				background-image: url('../assets/statistic1.png');
				background-repeat: no-repeat;
			}
			&:nth-child(2) {
				background-color: #ececff;
				background-image: url('../assets/statistic2.png');
				background-repeat: no-repeat;
			}
			.isPass {
				position: relative;
				font-size: 10px;
				font-weight: 600;
				color: rgb(221, 0, 0);
				background-color: rgb(255, 199, 199);
				width: 34px;
				height: 17px;
				display: flex;
				justify-content: center;
				align-items: center;
				bottom: 20px;
				left: 40px;
			}
			.upToOverdue {
				width: 44px;
				bottom: 20px;
				left: 40px;
			}
			.overdued {
				bottom: 33px;
				left: 85px;
			}
		}
	}
}
</style>
